//
// Clockhand
// -----------------------------------------------------------------------------
//
// ### Usage:
// Helpers for writing properties in clockhand manner.

.clockhand(@values, @prefix: ~"", @suffix: ~"", @collapse: false) {
	@l: length(@values);
	@pre: ~`'@{prefix}' ? '@{prefix}-' : ''`;
	@suf: ~`'@{suffix}' ? '-@{suffix}' : ''`;

	.map(1) {
		@top: extract(@values, 1);
		@right: @top;
		@bottom: @top;
		@left: @top;
	}
	.map(2) {
		@top: extract(@values, 1);
		@right: extract(@values, 2);
		@bottom: @top;
		@left: @right;
	}
	.map(3) {
		@top: extract(@values, 1);
		@right: extract(@values, 2);
		@bottom: extract(@values, 3);
		@left: @right;
	}
	.map(4) {
		@top: extract(@values, 1);
		@right: extract(@values, 2);
		@bottom: extract(@values, 3);
		@left: extract(@values, 4);
	}
	.map(@l);

	.reduce() when (@collapse) and not (@top = _) and not (@right = _)
	and not (@bottom = _) and not (@left = _) {
		.output() {
			@shorthand: @top;
		}
		.output() when not (@right = @top) {
			@shorthand: @top @right;
		}
		.output() when not (@bottom = @top) {
			@shorthand: @top @right @bottom;
		}
		.output() when not (@left = @right) {
			@shorthand: @top @right @bottom @left;
		}
		.output();
		@{prefix}@{suf}: @shorthand;
	}
	.reduce() when (default()) {
		.output() when not (@top = _) {
			@{pre}top@{suf}: @top;
		}
		.output() when not (@right = _) {
			@{pre}right@{suf}: @right;
		}
		.output() when not (@bottom = _) {
			@{pre}bottom@{suf}: @bottom;
		}
		.output() when not (@left = _) {
			@{pre}left@{suf}: @left;
		}
		.output();
	}

	.reduce();
}

.absolute(...) {
	position: absolute;
	.clockhand(@arguments);
}

.fixed(...) {
	position: fixed;
	.clockhand(@arguments);
}

.relative(...) {
	position: relative;
	.clockhand(@arguments);
}

.padding(...) {
	.clockhand(@arguments, padding, ~"", true);
}

.margin(...) {
	.clockhand(@arguments, margin, ~"", true);
}

.border-color(...) {
	.clockhand(@arguments, border, color, true);
}

.border-style(...) {
	.clockhand(@arguments, border, style, true);
}

.border-width(...) {
	.clockhand(@arguments, border, width, true);
}

//
// Reset
// -----------------------------------------------------------------------------
//
// ### Usage:
// 在整站中推荐使用`normalize`来初始化样式，`reset`仅建议在第三方页面局部使用。
//
// ### Example:
// .ec-zx-edu {
//     .reset-box-model;
//     ol, ul {
//         .reset-list-style;
//     }
// }
//
// ### Reference:
//  * http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
//  * http://compass-style.org/reference/compass/reset/utilities/

.global-reset() {
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		.reset-box-model();
		.reset-focus();
		.reset-font();
	}
	body {
		.reset-body();
	}
	ol, ul {
		.reset-list-style();
	}
	table {
		.reset-table();
	}
	caption, th, td {
		.reset-table-cell();
	}
	a img {
		border: none;
	}

	.reset-html5();
}

.nested-reset() {
	div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
	pre, a, abbr, acronym, address, code, del, dfn, em, img,
	dl, dt, dd, ol, ul, li, fieldset, form, label,
	legend, caption, tbody, tfoot, thead, tr {
		.reset-box-model();
		.reset-focus();
		.reset-font();
	}
	table {
		.reset-table();
	}
	caption, th, td {
		.reset-table-cell();
	}
	a img {
		border: none;
	}
}

.reset-box-model() {
	padding: 0;
	margin: 0;
	border: 0;
}

.reset-focus() {
	outline: 0;
}

.reset-font() {
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	font-size: 100%;
	vertical-align: baseline;
}

.reset-body() {
	line-height: 1;
}

.reset-table() {
	border-collapse: separate;
	border-spacing: 0;
	vertical-align: middle;
}

.reset-table-cell() {
	text-align: left;
	font-weight: normal;
	vertical-align: middle;
}

.reset-list-style() {
	list-style: none;
}

.reset-html5() {
	article, aside, details, figcaption,
	figure, footer, header, hgroup, menu, nav,
	section, summary, main {
		display: block;
		.reset-box-model();
		.reset-focus();
		.reset-font();
	}
	audio, canvas, video {
		.inline-block();
	}
	audio:not([controls]),[hidden] {
		display: none;
	}
}

//
// Typography
// -----------------------------------------------------------------------------
//
// ### Usage:
// 提供文本相关的mixin样式。


//
// .ellipsis
//
// Known issue:
// 指定参数（行数）的功能只支持WebKit。
.ellipsis() {
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
}
.ellipsis(@line-number) {
	display: -webkit-box;
	-webkit-line-clamp: @line-number;
	-webkit-box-orient: vertical;
}

//
// force-wrap
//
// 阻止长字符串（例如url或无意义连续英文字符）打破布局

.force-wrap() {
	white-space: pre;           // CSS 2.0
	white-space: pre-wrap;      // CSS 2.1
	white-space: pre-line;      // CSS 3.0
	white-space: -pre-wrap;     // Opera 4-6
	white-space: -o-pre-wrap;   // Opera 7
	white-space: -moz-pre-wrap; // Mozilla
	white-space: -hp-pre-wrap;  // HP Printers
	word-wrap: break-word;      // IE 5+
}


//
// Util
// -----------------------------------------------------------------------------
//
// ### Usage:
// Common utilities.
//
// ### Example:
// .some-floats-inside {
//     .clearfix();
// };

// clearfix via http://h5bp.com/q
.clearfix() {
	zoom: 1;
	&:before,
	&:after {
		content: " ";
		display: table;
	}
	&:after {
		clear: both;
		visibility: hidden;
		font-size: 0;
		height: 0;
	}
}

//
// .no-bullet
// .no-bullets
//
// "Unstyle" lists, `.no-bullet()` for `<li>`s and `.no-bullets()` for `<ul>` & `<ol>`
// [deprecated]

.no-bullet() {
	list-style-image: none;
	list-style-type: none;
	margin-left: 0;
}

.no-bullets() {
	list-style: none;
	li {
		.no-bullet();
	}
}

.inline-block() {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}


